<template>
	<view class="container">
		<view class="icon-box">
			<image class="icon" src="../../../static/icon/login/logo.png"></image>
		</view>
		<!-- <view class="input-box">
			<view class="input-content">
				<text class="lable">账号 </text>
				<icon type="personal" size="20" />
				<input class="uni-input" type="text" v-model="loginInfo.number" placeholder="请输入账号" />
			</view>
			<view class="input-content">
				<text class="lable">密码 </text>
				<icon type="personal" size="20" />
				<input class="uni-input" password v-model="loginInfo.password" placeholder="请输入密码" />
			</view>
		</view> -->
		<text style="font-weight: bold;" class="font-color-666 font-16px">重庆百来码工程师登录</text>

		<!-- 登录form -->
		<view class="login_form">
			<view class="input">
				<view class="img">
					<image style="width:27px;height: 27px;" :src="imgInfo.icon_user" />
				</view>
				<input type="text" maxlength="20" v-model="loginInfo.number" @input="onInput" placeholder="请输入工号">
				<span v-show="delflag">
					<view class="img">
						<image @tap="delUser" class="img_del" :src="imgInfo.icon_del" />
					</view>
				</span>
			</view>
			<view class="line" />
			<view class="input">
				<view class="img">
					<image style="width:27px;height: 27px;" :src="imgInfo.icon_pwd" />
				</view>
				<input v-if="flag" type="password" v-model="loginInfo.password" placeholder="请输入密码">
				<input v-else type="text" v-model="loginInfo.password" placeholder="请输入密码">
				<span v-show="flag">
					<view class="img" @click="flag =! flag">
						<image class="img_pwd_switch" :src="imgInfo.icon_pwd_hid" />
					</view>
				</span>
				<span v-show="!flag">
					<view class="img" @click="flag = !flag">
						<image class="img_pwd_switch" :src="imgInfo.icon_pwd_show" />
					</view>
				</span>
			</view>
		</view>
		<button class="submit" type="primary" @tap="login">登录</button>
	</view>
</template>

<script>
	import {
		getTokenSync,
		setToken,
		getStateSync,
		removeStateSync,
		setLoginInfoSync,
		getLoginInfoSync
	} from '@/utils/auth.js'
	import validate from '@/common/js_sdk/fshjie-formvalidate/ys-validate.js'
	export default {
		data() {
			const isUni = typeof(uni) !== 'undefined'
			return {
				delflag: false,
				flag: true,
				loginInfo: {
					number: '',
					password: ''
				},

				imgInfo: {
					head: isUni ? '/static/logo.jpg' : require('./images/logo.jpg'),
					icon_user: isUni ? '/static/icon_user.png' : require('./images/icon_user.png'),
					icon_del: isUni ? '/static/icon_del.png' : require('./images/icon_del.png'),
					icon_pwd: isUni ? '/static/icon_pwd.png' : require('./images/icon_pwd.png'),
					icon_pwd_show: isUni ? '/static/icon_pwd_show.png' : require('./images/icon_pwd_switch.png'),
					icon_pwd_hid: isUni ? '/static/icon_pwd_hid.png' : require('./images/icon_pwd_switch.png'),
				}
			}
		},
		methods: {
			onInput(e) {
				e.detail.value.length === 0 ? this.delflag = false : this.delflag = true
			},
			delUser() {
				this.loginInfo.number = ''
				this.delflag = false
			},
			thirdLogin(type) {
				console.log(type)
			},

			/**
			 * 验证信息字段
			 */
			validate() {
				/**
				 * 定义验证规则
				 */
				let loginRules = [{
						name: 'number',
						type: 'required',
						errmsg: '请输入账号！账号不能为空'
					},
					{
						name: 'password',
						type: 'required',
						errmsg: '请输入密码！密码不能为空'
					}
				]
				let valLoginRes = validate.validate(this.loginInfo, loginRules)
				if (!valLoginRes.isOk) {
					uni.showToast({
						icon: 'none',
						title: valLoginRes.errmsg
					})
					return false
				}
				return true
			},

			/**
			 * 登录
			 */
			login() {
				// setToken("aaaa")
				console.log(this.$store.getters.name)
				console.log(getTokenSync())
				console.log(getStateSync())
				if (this.validate()) {
					uni.showLoading({
						title: '正在登录...'
					})


					this.$store.dispatch('user/login', this.loginInfo).then(() => {
						// 本地存储用户登录信息
						setLoginInfoSync(this.loginInfo)
						console.log('aaaaa')
						setTimeout(() => {
							uni.hideLoading()
							setTimeout(() => {
								uni.showToast({
									icon: 'success',
									title: "登录成功",
								})
							}, 1000)
							uni.reLaunch({
								url: '/pages/views/engineer/Personal/Personal'
							});
						}, 1000)
					}).catch(() => {})
				}

			}
		},
		onLoad() {
			this.$store.dispatch('user/logout')
			// 二次登录记录密码
			if (getLoginInfoSync()) {
				this.loginInfo = JSON.parse(getLoginInfoSync())
			}
		}

	}
</script>

<style lang="scss" scoped>
	$logo-padding: 60px;
	$form-border-color: rgba(214, 214, 214, 1);
	$text-color: #B6B6B6;

	page {
		background-color: #FFFFFF;
	}

	.container {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		height: 900rpx;
		width: 100%;

		.icon-box {
			// width: 60%;
			// height: 65%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.icon {
			// height: 440rpx;
		}


		.login_form {
			width: 90%;
			display: flex;
			margin: 40rpx;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border: 2rpx solid $form-border-color;
			border-radius: 20rpx;

			.line {
				width: 100%;
				height: 2rpx;
				background-color: $form-border-color;
			}

			.input {
				width: 100%;
				max-height: 90rpx;
				display: flex;
				padding: 6rpx;
				flex-direction: row;
				align-items: center;
				justify-content: center;

				.img {
					min-width: 80rpx;
					min-height: 80rpx;
					margin: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.img_del {
					width: 42rpx;
					height: 42rpx;
				}

				.img_pwd_switch {
					height: 55rpx;
					width: 55rpx;
				}

				input {
					outline: none;
					height: 60rpx;
					width: 100%;

					&:focus {
						outline: none;
					}
				}
			}
		}

		.submit {
			width: 90%;
			color: white;
			background-color: #09BB07;
			line-height: 100rpx;

			&:active {
				color: #FFFFFF;
				background-color: #079a00;
			}
		}


	}
</style>